{% extends 'web/layout/manage.html' %}
{% load static %}

{% block css %}
    <link rel="stylesheet" href="{% static 'web/plugin/editor-md/css/editormd.min.css' %}">
    <style>
        .function {
            float: right;
            position: relative;
            top: -7px;
        }

        .wiki-menu {
            min-height: 500px;
            border-right: 1px solid #dddddd;
        }

        .wiki-content {
            min-height: 600px;
            border-left: 1px solid #dddddd;
            position: relative;
            left: -1px;
            text-align: center;

        }

        .panel-body {
            padding: 0 15px;
        }

        .wiki-content-home-page {
            position: relative;
            top: 100px;
        }

        .wiki-detail {

        }
    </style>
{% endblock %}

{% block content %}
    <div class="panel panel-default">
        <div class="panel-heading">
            <i class="fa fa-book"></i>
            Wiki文档
            <div class="function">
                <a href="{% url 'wiki_add' project_id=request.login_user.project.id %}" type="button"
                   class="btn btn-primary"><i class="fa fa-plus-square"></i> &nbsp 新建</a>
                {% if wiki_object %}
                    <a href="{% url 'wiki_edit' project_id=request.login_user.project.id wiki_id=wiki_object.id %}"
                       type="button" class="btn btn-info"><i class="fa fa-edit"></i>&nbsp编辑</a>
                    <a href="{% url 'wiki_delete' project_id=request.login_user.project.id wiki_id=wiki_object.id %}"
                       type="button" class="btn btn-warning"><i class="fa fa-remove"></i>&nbsp删除</a>
                {% endif %}
            </div>
        </div>
        <div class="panel-body">
            <div class="wiki-main">
                <div class="col-md-3 wiki-menu">
                    <ul id="wiki-catelog">

                    </ul>
                </div>
                <div class="col-md-9 wiki-content">
                    {% if wiki_object %}
                        <div id="previewMarkdown" class="wiki-detail">
                            <textarea>{{ wiki_object.content }}</textarea>
                        </div>
                    {% else %}
                        <div class="wiki-content-home-page">
                            <h4><< {{ request.login_user.project.name }}wiki文档库 >></h4>
                            <a href="{% url 'wiki_add' project_id=request.login_user.project.id %}" type="button"
                               class="btn btn-link"><i class="fa fa-plus-square"></i>&nbsp新建项目</a>
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block js %}
    <script src="{% static 'web/plugin/editor-md/editormd.min.js' %}"></script>
    <script src="{% static 'web/plugin/editor-md/lib/marked.min.js' %}"></script>
    <script src="{% static 'web/plugin/editor-md/lib/prettify.min.js' %}"></script>
    <script src="{% static 'web/plugin/editor-md/lib/raphael.min.js' %}"></script>
    <script src="{% static 'web/plugin/editor-md/lib/underscore.min.js' %}"></script>
    <script src="{% static 'web/plugin/editor-md/lib/sequence-diagram.min.js' %}"></script>
    <script src="{% static 'web/plugin/editor-md/lib/flowchart.min.js' %}"></script>
    <script src="{% static 'web/plugin/editor-md/lib/jquery.flowchart.min.js' %}"></script>
    <script>
        $(function () {
            initPreivewMarkdown();
            initWikiCatelog();
        });

        function initPreivewMarkdown() {
            editormd.markdownToHTML("previewMarkdown", {
                htmlDecode: "style,script,iframe"
            });
        }

        function initWikiCatelog() {
            var WIKI_DETAIL_URL = "{% url 'wiki' project_id=request.login_user.project.id %}";
            $.ajax({
                url: '{% url 'wiki_catelog' project_id=request.login_user.project.id %}',
                type: 'GET',
                data: '',
                dataType: 'JSON',
                success: function (res) {
                    if (res.status) {
                        console.log(res.wiki_list);
                        $.each(res.wiki_list, function (index, item) {
                            // 拼接wiki的URL链接
                            var href = WIKI_DETAIL_URL + "?wiki=" + item.id;
                            // 创建一个li标签，设置id属性，在li标签内新建一个a标签，给a标签设置内容和href属性，最后在创建一个ul标签
                            // <li id='xxx'>
                            //     <a href='link'> title </a>
                            //     <ul></ul>
                            // </li>
                            var li = $("<li>").attr('id', "id_" + item.id).append($('<a>').text(item.title).attr('href', href)).append($('<ul>'));

                            if (!item.parent) {
                                // 如果没有父级别目录，那么就是根目录
                                // 添加到catalog中
                                $('#wiki-catelog').append(li);
                            } else {
                                $("#id_" + item.parent).children('ul').append(li);
                            }
                        })
                    } else {
                        alert('初始化wiki目录失败');
                    }
                }
            });
        }
    </script>
{% endblock %}
